<script setup lang="ts">
import { type Tree } from '@/entity/FrontendStruct';
import { BIconFolderMinus, BIconFolderPlus } from 'bootstrap-icons-vue';
import type { ElTree } from 'element-plus';
import type Node from 'element-plus/es/components/tree/src/model/node';
import { ref } from 'vue';

const props = defineProps<{
    data?: Tree[]
    // 回调接口
    callback?: Callback
    // 是否显示操作按钮
    showOperation?: Boolean
    // 是否显示选择框
    showCheckBox?: Boolean
    // 是否默认打开子节点
    openDefault?: Boolean
    // 选择节点是是否关联选择夫节点
    checkStrictly?: Boolean
    // 默认选择节点
    defaultKeys?: [number]
    //默认选择打开节点
    openDefaultKeys?: [number]
    movePosition?: Array<string>,
}>()
const emit = defineEmits(["moveEnd"])

const treeAPi = ref<InstanceType<typeof ElTree>>();

// next prev inner 支持拖动的对象
const DraggablePosition = (node: Node, dnode: Node, type: string)=>{
  if(props.movePosition != null && props.movePosition.indexOf(type) != -1){
    return true;
  }
  return false;
}

export interface Callback{
  append?(data: Tree): any
  remove?(node: Node, data: Tree): any
  edit?(data: Tree): any
  click?(node: Tree, el: any, treeNode: any, evnet: any): any
  check?(data: any, tree: any): any

}
// 导出变量到组件的变量上
defineExpose({
  treeAPi
})
</script>

<template>
    <div id="tree_screen">
        <el-tree
        ref="tree"
        style="max-width: 600px; "
        :data="data"
        :show-checkbox="showCheckBox"
        node-key="id"
        :default-expand-all="openDefault"
        :default-expanded-keys="openDefaultKeys"
        :expand-on-click-node="false"
        :check-strictly="checkStrictly"
        @node-click="callback?.click"
        @check="callback?.check"
        :default-checked-keys="props.defaultKeys"
        :draggable="movePosition == null ? false : true"
        :allow-drop="DraggablePosition"
        @node-drop="(before:Node, after:Node, innr:any, event:any)=>{emit('moveEnd', before, after, innr, event)}"
        >
        
        <!-- <template #default="{ node, data }" v-if="showOperation == null ? false: showOperation">
          <span class="custom-tree-node">
          <span style="font-size: 14px;">{{ node.label }}</span>
          <span style="margin-left: 5px; font-size: 16px; border-radius: 5px; " >
              <el-icon class="operation-tree-item" style="padding-left: 5px; background-color: #a7a7a78f;" @click="callback?.append?.(data)" >
              <BIconFolderPlus />
            </el-icon>
            <el-icon class="operation-tree-item" style="padding-left: 5px; background-color: #a7a7a78f;" @click="callback?.remove?.(node, data)">
              <BIconFolderMinus />
            </el-icon>
            <el-icon class="operation-tree-item" @click="callback?.edit?.(data)" style="padding-left: 5px; background-color: #a7a7a78f;"><Edit /></el-icon>
          </span>
          </span>
        </template> -->
        </el-tree>
    </div>
</template>

<style scoped>
#tree_screen {
    width: 250px;
    overflow-x: scroll;
    height: 100%;
}

.operation-tree-item :hover{
  line-height: 25px;
  color: #41d7d4d3;
}
</style>